fix: perf + flicker in design app - #2622
Conversation
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
This comment has been minimized.
![builder-io-integration[bot]](https://avatars.githubusercontent.com/in/353721?s=60&v=4){kind=small}
There was a problem hiding this comment.
Builder reviewed your changes — looks good ✅
Review Details
Code Review Summary
PR #2622 optimizes multi-screen canvas zooming by coalescing camera updates, applying a compositor-friendly transient iframe filter during wheel gestures, and moving screen paint suppression out of React's render path. It also avoids redundant iframe content replacement after load and prevents opaque board previews from rendering for empty documents. The overall approach is sound: gesture-time DOM updates stay render-free, cleanup restores transient styles, and the new paint-suppression logic is covered by focused tests. The reviewed paths did not reveal a confirmed correctness, security, or performance regression.
Risk: Standard — this changes shared canvas state, culling, and iframe rendering behavior rather than only presentation styling.
Review outcome
- ✅ Wheel gesture filtering is tracked and cleared on settle/cancel paths.
- ✅ Paint suppression is synchronized with live camera movement and avoids React style ownership conflicts.
- ✅ Board preview gating handles empty surface content.
- ✅ Focused tests and template typecheck were reported passing by the review worker.
🧪 Browser testing: Will run after this review (PR touches UI code)
|
Here's a visual recap of what changed: Open the full interactive recap |
2 participants
A trackpad fires wheel events faster than the screen refreshes. Ten events between two frames would mean ten pointless transform writes, so events accumulate into a ref and rAF applies the latest value once per frame.
Previously, every scale change forced each screen to re-rasterise. Because all six screens are iframes (each its own document with its own render surface) the browser had to redraw all six from scratch on every tick. It couldn't finish inside the 16ms frame budget, so it shipped the frame unfinished, and the iframes drew nothing. That's the flicker, and it's why the surrounding editor chrome was half-painted too.
The filter/blur approach forces the browser to cache each iframe's pixels as a bitmap. While the gesture runs, a scale change stretches those bitmaps instead of redrawing. When the view settles, we drop the filter and take a single sharp re-raster.